<template>
  <div id="app">
    <h2>App内容：state相关信息</h2>
    <p>counter：{{$store.state.counter}}</p>
    <p>students：{{$store.state.students}}</p>

    <h2>App内容：mutations相关信息</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addCount(20)">+20</button>
    <button @click="addStudent">添加学生</button>
    <button @click="addStudentAsyn">异步添加学生</button>

    <h2>App内容：getters相关信息</h2>
    <p>超过20岁的学生信息：{{$store.getters.more20Stu}}</p>
    <p>超过20岁的学生人数：{{$store.getters.more20StuLenth}}</p>
    <p>超过22岁的学生信息：{{$store.getters.moreAgeStu(22)}}</p>

    <h2>App内容：info对象的内容是否是响应式的</h2>
    <button @click="updateInfo">更新信息</button>
    <p>info对象信息：{{$store.state.info}}</p>

    <h2>App内容：modules中的内容</h2>
    <p>{{$store.state.a.name}}</p>
    <button @click="updateName">修改名称</button>
    <button @click="updateNameAsyn">异步修改名称</button>
    <p>{{$store.getters.fullName}}</p>
    <p>{{$store.getters.fullNameExt}}</p>
    <p>{{$store.getters.fullNamePlus}}</p>

    <h2>HelloWorld内容</h2>
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import {UPDATE_INFO} from './store/mutation-types';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'hello vuex'
    }
  },
  methods: {
    add() {
      this.$store.commit('increment');
    },
    sub() {
      this.$store.commit('decrement');
    },
    // 普通提交风格
    addCount(count) {
      this.$store.commit('incrementCount', count);
    },
    // 特殊提交风格
    addCountSpecial(count) {
      this.$store.commit({
        type: 'incrementCountSpecial',
        count: count
      });
    },
    addStudent() {
      const student = {id: 115, name: '朱茵', age: 25};
      this.$store.commit('addStudent', student);
    },
    addStudentAsyn() {
      const student = {id: 116, name: '钟灵', age: 26};
      this.$store.dispatch('addStudentAsyn', student).then(res => {
        console.log(res);
        console.log("完成了添加操作...");
      });
    },
    updateInfo() {
      this.$store.commit(UPDATE_INFO);
    },
    updateName() {
      this.$store.commit('updateName', 'lisi');
    },
    updateNameAsyn() {
      this.$store.dispatch('updateNameAsyn', {name: '李若彤'}).then(res => {
        console.log(res);
        console.log("完成了修改操作...");
      });
    }
  }
}
</script>

<style>

</style>
